<template>
  <div class="bf-commont-template">
    <!-- 合同信息 -->
    <!-- <el-card class="box-card"> -->
      <div slot="header" class="clearfix">
        <!-- <span>合同信息</span> -->
        <div class="clearfix card-slot">
          <div class="float-l">
            <span class="bar-l"></span><span>合同信息</span>
          </div>
          <div class="float-r">
            <el-button class="car-action" type="text" @click="addConttact">新增</el-button>
          </div>
        </div>
      </div>
      <div >
        <div v-if="conttact.length == 0" class="data-null">
          <img src="../../../../../../assets/beneform4j/roster/icon_not_record.png" alt="">
          <div class="text-c">
            <span>
              暂无合同信息
            </span>
          </div>
        </div>
        <div  v-for="item in conttact" :key="item.id"  :class="item._editing?'form-editing input-border-b':'form-edited input-border-none'">
          <div class="int-content clearfix rp-content relative">
            <!-- <div :class="item._editing?'':'mask'"></div> -->
            <div>
              <div>合同编号:</div>
              <div>
                <el-input v-model="item.contNo" v-if="item._editing" ></el-input>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.contNo}}</span></div>
              </div>
            </div>
            <div>
              <div>合同类型:</div>
              <div>
                <el-input v-model="item.contType" v-if="item._editing"></el-input>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.contType}}</span></div>
              </div>
            </div>
            <div>
              <div>合同期限:</div>
              <div>
                <el-input v-model="item.contTerm" v-if="item._editing"></el-input>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.contTerm}}</span></div>
              </div>
            </div>
            <div>
              <div>合同签订日期:</div>
              <div>
                <!-- <el-input v-model="item.contSignDate" v-if="item._editing"></el-input> -->
                <el-date-picker
                  v-if="item._editing"
                  v-model="item.contSignDate"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.contSignDate}}</span></div>
              </div>
            </div>
            <div>
              <div>合同开始日期:</div>
              <div>
                <!-- <el-input v-model="item.beginDate" v-if="item._editing"></el-input> -->
                <el-date-picker
                  v-if="item._editing"
                  v-model="item.beginDate"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.beginDate}}</span></div>
              </div>
            </div>
            <div>
              <div>合同结束日期:</div>
              <div>
                <!-- <el-input v-model="item.endDate" v-if="item._editing"></el-input> -->
                <el-date-picker
                  v-if="item._editing"
                  v-model="item.endDate"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期">
                </el-date-picker>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.endDate}}</span></div>
              </div>
            </div>
            <div>
              <div>签约公司:</div>
              <div>
                <el-input v-model="item.signCompany" v-if="item._editing"></el-input>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.signCompany}}</span></div>
              </div>
            </div>
            <div>
              <div>合同状态:</div>
              <div>
                <el-input v-model="item.contStatus" v-if="item._editing"></el-input>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.contStatus}}</span></div>
              </div>
            </div>

            <div>
              <div>到期前提醒标志:</div>
              <div>
                <el-input v-model="item.isExpireReminding" v-if="item._editing"></el-input>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.isExpireReminding}}</span></div>
              </div>
            </div>
            <div class="w-100">
              <div >备注:</div>
              <div>
                <el-input v-model="item.contMemo" v-if="item._editing"></el-input>
                <div class="int-iput-value"  v-if="!item._editing"><span >{{item.contMemo}}</span></div>
              </div>
            </div>
            <div class="w-100" v-if="item._editing">
              <div class="action-button">
                <el-button type="primary" @click="saveContract(item)">保存</el-button>
                <!-- <el-button type="primary" @click="editContract(item)">编辑</el-button>
                <el-button type="primary" @click="deleteContract(item)">删除</el-button> -->
                <el-button @click="item._editing = false; deleteContract(item, true)">取消</el-button>
              </div>
            </div>

            <div class="list-edit" v-if="!item._editing">
              <div @click="editContract(item)"><img src="../../../../../../assets/beneform4j/roster/roster_icon_edit.png" alt=""><span>编辑</span></div>
            </div>
            <div class="list-delete" v-if="item._editing">
              <div  @click="deleteContract(item)"><img src="../../../../../../assets/beneform4j/roster/roster_icon_delete.png" alt=""><span>删除</span></div>
            </div>
          </div>
          <!-- <div class="int-content clearfix border-b">
            <div class="w-100" >
              <div class="w-12"></div>
              <div>
                <el-button type="primary" @click="saveContract(item)">保存</el-button>
                <el-button type="primary" @click="editContract(item)">编辑</el-button>
                <el-button type="primary" @click="deleteContract(item)">删除</el-button>
                <el-button @click="item._editing = false">取消</el-button>
              </div>
            </div>
          </div> -->
        </div>
      </div>
    <!-- </el-card> -->
  </div>
</template>

<script>
import { getConttactApi, addConttactApi, editConttactApi, deleteConttactApi } from '../api'
export default {
  props: ['employeeData'],
  data() {
    return {
      form: {},
      employeeNo: '18081610',
      editConttactStatus: false,
      conttact: []
    }
  },
  mounted: function() {
    this.employeeNo = this.employeeData.employeeNo
    // 获取合同信息
    this.getConttact()
  },
  methods: {
    deleteContract(item, status) {
      if (item._add === true) {
        this.conttact.forEach((v, i) => {
          if (v == item) {
            this.conttact.splice(i, 1)
          }
        })
        return
      }
      if (status) {
        return
      }
      deleteConttactApi(item).then(response => {
        if (response.success) {
          this.$message({
            message: '删除合同信息成功',
            type: 'success'
          })
          this.getConttact()
        }
      })
    },
    editContract(item) {
      this.$set(item, '_editing', true)
    },
    saveContract(item) {
      item.employeeNo = this.employeeNo
      if (item._add) {
        // 新增
        addConttactApi(item).then(response => {
          if (response.success) {
            this.$message({
              message: '添加合同信息成功',
              type: 'success'
            })
            item._add = false
            item._editing = false
            this.getConttact()
          }
        })
      } else {
        // 修改
        editConttactApi(item).then(response => {
          if (response.success) {
            this.$message({
              message: '修改合同信息成功',
              type: 'success'
            })
            item._editing = false
            this.getConttact()
          }
        })
      }
    },
    getConttact() {
      getConttactApi(this.employeeNo).then(response => {
        this.conttact = response.data
        // console.log(response)
      })
    },
    addConttact() {
      this.conttact.unshift({
        _editing: true,
        _add: true
      })
    }
  }
}
</script>

<style scoped>
@import './form.css';
</style>
